import { UsersConsumer } from "./usersContext";

import { Link } from 'react-router-dom';

import styles from './User.module.css';

function UserList(){

  function handle( user, index ){
    return (
        <div className={ styles.userItem } key={ user.id }>
            <span className={ styles.ordinal }>{index+1}</span>
            <span className={ styles.account }>{user.account}</span>
            <span className={ styles.nickname }>{user.nickname}</span>
            <span className={ styles.operation }>
                <Link to={`/user/detail/${user.id}`}>详情</Link>
                &nbsp;|&nbsp;
                <Link to={`/user/detail?id=${user.id}`}>详情</Link>
            </span>
        </div>
    )
  }

  return (
      <div className={ styles.userList }>
        <UsersConsumer>{ value => value.map( handle ) }</UsersConsumer>
      </div>
  ) 
}

export default UserList ;